<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CheckboxSelect</title>
    <!-- <link rel="stylesheet" href="./css/reset.css" /> -->
    <style>
        #box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
        }
        .box_check {
            width: 25px;
            height: 25px;
        }
        #selDiv {
            position: absolute;
            border: 3px dashed #fee;
        }
    </style>
</head>

<body>
    <div id="box">
        <input type="checkbox" class="box_check"><input type="checkbox" class="box_check"><input type="checkbox"
            class="box_check"><input type="checkbox" class="box_check"><input type="checkbox" class="box_check"><input
            type="checkbox" class="box_check"><input type="checkbox" class="box_check"><input type="checkbox"
            class="box_check"><input type="checkbox" class="box_check"><input type="checkbox" class="box_check"><input
            type="checkbox" class="box_check"><input type="checkbox" class="box_check"><input type="checkbox"
            class="box_check"><input type="checkbox" class="box_check"><input type="checkbox" class="box_check"><input
            type="checkbox" class="box_check"><input type="checkbox" class="box_check"><input type="checkbox"
            class="box_check">
        <div id="selDiv">
        </div>
    </div>

    <script>
        window.onload = function () {
            // 获取所有checkbox
            let boxes = document.getElementsByTagName("input");
            // 获取选择框
            let selDiv = document.getElementById("selDiv");
            let clickX = null
            let clickY = null
            // 判断是否点击选择
            let isSelect = false
            document.onmousedown = function (e) {
                // 再次点击之前，取消之前的选中的
                for (let i = 0; i < boxes.length; i++) {
                    boxes[i].checked = false;
                }
                isSelect = true;
                clickX = e.clientX;
                clickY = e.clientY;
                selDiv.style.left = clickX + "px";
                selDiv.style.top = clickY + "px";

            }
            document.onmousemove = function (e) {
                if (!isSelect) return
                selDiv.style.left = Math.min(e.clientX, clickX) + 'px';
                selDiv.style.top = Math.min(e.clientY, clickY) + 'px';
                selDiv.style.width = Math.abs(e.clientX - clickX) + 'px';
                selDiv.style.height = Math.abs(e.clientY - clickY) + 'px';
                for (let i = 0; i < boxes.length; i++) {
                    // 复选框左边需要小于选择框的右边
                    let boxLeft = boxes[i].offsetLeft < selDiv.offsetLeft + selDiv.offsetWidth
                    // 复选框右边需要大于选择框的左边
                    let boxRight = boxes[i].offsetWidth + boxes[i].offsetLeft > selDiv.offsetLeft
                    // 复选框上边需要小于选择框的下边
                    let boxTop = boxes[i].offsetTop < selDiv.offsetTop + selDiv.offsetHeight
                    // 复选框的下边需要大于选择框的上边
                    let boxBottom = boxes[i].offsetHeight + boxes[i].offsetTop > selDiv.offsetTop
                    // 都满足时,复选框选中
                    if (boxLeft && boxRight && boxTop && boxBottom) {
                        boxes[i].checked = true;
                    }
                }


            }
            document.onmouseup = function () {
                if (!isSelect) return;
                isSelect = false;
                selDiv.style.width = 0;
                selDiv.style.height = 0;
            }

        }
    </script>
</body>

</html>